<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Timeglider jQuery Widget: Basic Demo</title>

<link rel="stylesheet" href="css/aristo/jquery-ui-1.8.5.custom.css" type="text/css" media="screen" title="no title" charset="utf-8">

<link rel="stylesheet" href="js/timeglider/Timeglider.css" type="text/css" media="screen" title="no title" charset="utf-8">

<style type='text/css'>
        /* timeline div style */
		body { font-family:Helvetica, Arial, sans-serif; }
		.info {
			width:750px;
			font-family:Helvetica, Arial, sans-serif;
			margin:32px auto 32px auto;
			color:#444;
			font-size:.9em;
		}
		
		
		#placement {
			width:750px;
			margin:32px auto 32px auto;
			height:400px;
		}
		
		.timeline-table {
		    /* In case JS fails, the table will still
			   display.
			*/
			width:750px;
			margin:32px auto 32px auto;
			border:1px solid black;
			border-collapse:collapse;

		}
		.timeline-table td {
			border:1px dotted #ccc;
			padding:3px;
			font-size:10px;
		}
		
		#toggle {
			color:blue;
			cursor:pointer;
			font-weight:bold;
		}
		
</style>
</head>



<body>
<h1>Timeglider timeline fed from HTML table</h1>
<div class='info'>
<p>Please view source to see how to construct the table for importing data. Code is commented.</p> 
<p id='toggle'>Toggle view</p>
<p id='output'>...</p>
</div>

<!-- TIMEGLIDER PLACEMENT: Put the intended location for the timeline  
     directly above the data table -->
<div id='placement'></div>

<!-- TIMELINE PROPERTIES are set as attributes of the table element,
     most importantly the id, focus_date, and initial_zoom -->
<table class='timeline-table' id="mylife" focus_date="1985-06-12" title="my life" initial_zoom="48" description="The Wild and Wooly times of Michael Richardson.">
	
    
    <!-- The first row of the table is reserved for meta-data.
    
         Class values below are *critical* for mapping out data from the 
	     <td> elements that follow ---  though order is not important.
         The text in <td> elements is *not* critical: just the class names.
    -->
    <tr>
    <th class="tg-startdate">start date</th>
	<th class="tg-enddate">end date</th>
    <th class="tg-title">title</th>
    <th class="tg-description">description</th>
	<th class="tg-icon">icon</th>
	<th class="tg-date_limit">date limit</th>
	<th class="tg-importance">importance</th>
	<th class="tg-link">link</th>
    </tr>
    
    
    <!-- EVENTS ARE IN THE 2nd+ ROWS OF THE TABLE. While appropriate for viewing
         as a visual table, order of rows is not important. 
    -->
    <tr>
      <td>1968-08-20</td>
      <td></td>
      <td>Born</td>
		<td>Valley hospital in Ridgewood, NJ, to Martha &amp; Steve Richardson.</td>
		<td>circle_green.png</td>
		<td>&nbsp;</td>
		<td>50</td>
		<td>http://www.ridgewoodnj.net/main.cfm</td>
    </tr>

	<tr>
      <td>1982-09-01</td>
      <td>1986-06-20</td>
      <td>HHS</td>
		<td>Hanover (NH) High School.</td>
		<td>star_blue.png</td>
		<td>da</td>
		<td>32</td>
		<td>http://hanoverhigh.us/Hanover/</td>
    </tr>

	<tr>
      <td>1987-03-01</td>
      <td>1987-07-20</td>
      <td>Asia</td>
		<td>Thailand, India, and Nepal</td>
		<td>circle_orange.png</td>
		<td>mo</td>
		<td>32</td>
		<td></td>
    </tr>

	<tr>
      <td>1986-09-01</td>
      <td>1992-06-01</td>
      <td>Wesleyan</td>
		<td>After six years of too little sex, too many drugs, and questionable rock and roll.</td>
		<td>star_blue.png</td>
		<td>da</td>
		<td>32</td>
		<td>http://wesleyan.edu</td>
    </tr>

	<tr>
      <td>1995-09-05</td>
      <td>today</td>
      <td>Marriage</td>
		<td></td>
		<td>star_green.png</td>
		<td>ye</td>
		<td>45</td>
		<td></td>
    </tr>
  </table>




<!-- 3rd party libs -->
    <script src="js/jquery-1.4.4.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/jquery-ui-1.8.9.custom.min.js" type="text/javascript" charset="utf-8"></script>

    <!-- FRIEND LIBS -->
    <script src="js/underscore-min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/backbone-min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/jquery.global.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/jquery.tmpl.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/ba-debug.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/ba-tinyPubSub.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/jquery.mousewheel.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/jquery.ui.ipad.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/raphael-min.js" type="text/javascript" charset="utf-8"></script>

	    
	<!-- TIMEGLIDER -->
	<script src="js/timeglider/TG_Date.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/timeglider/TG_Org.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/timeglider/TG_Timeline.js" type="text/javascript" charset="utf-8"></script> 
	<script src="js/timeglider/TG_TimelineView.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/timeglider/TG_Mediator.js" type="text/javascript" charset="utf-8"></script> 
	<script src="js/timeglider/timeglider.timeline.widget.js" type="text/javascript" charset="utf-8"></script>

  <script>

	$(document).ready(function () { 
		
		var tld = "timeline";
		
		var tg1 = $("#placement").timeline({
				"min_zoom":18, 
				"max_zoom":55, 
				// data source is the id of the table!
				"data_source":"#mylife"
		});
		
		
		$("#toggle").click(function () { 
			if (tld == "timeline") {
				$("#placement").css({"display":"none"});
				$(".timeline-table").css({"display":"block"});
				tld = "table";
			} else {
				$("#placement").css({"display":"block"});
				$(".timeline-table").css({"display":"none"});
				
				tld = "timeline";
			}
			
		});
		
		
    }); // end document-ready
	
</script>




</body>
</html>


